<template>
  <div class="swiper-container" :class="gigoclass">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
  </div>
</template>

<script>
import Swiper from 'swiper' // swiper引入
import 'swiper/css/swiper.min.css' // swiper CSS引入
// export default {
//   mounted () {
//     this.swiper = new Swiper('.swiper-container', {
//       loop: true,
//       autoplay: {
//         delay: 2500,
//         disableOnInteraction: false
//       }
//     })
//   }
// }
export default {
  props: ['gigoclass', 'gigodata'],
  mounted () {
    new Swiper('.' + (this.gigoclass ? this.gigoclass : 'swiper-container'), this.gigodata)
  }
}
// 循环模式选项
// loop: true,

// 如果需要分页器
// pagination: {
//     el: '.swiper-pagination',
//     //可点击分页进行跳转
//     clickable: true,
// },

// 如果需要前进后退按钮
// navigation: {
//     nextEl: '.swiper-button-next',
//     prevEl: '.swiper-button-prev',
// },

// autoplay: {
//     delay: 2500,
//     disableOnInteraction: false,
// },
// 每页的图片
// slidesPerView:3,
// 图片间距
// spaceBetween: 10
</script>

<style lang="scss" scoped>
.swiper-container {
  margin-top: 4px;
}
</style>
